<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="lib :: common_header"></head>
<body>
<div th:replace="lib :: header_box"></div>
<div th:replace="lib :: menu_box (3)"></div>

<div class="main-box" v-model="project_user">
    <div class="main-container">
        <!-- 面包屑导航 -->
        <div class="row main-container-header">
            <div class="col-md-12 rel">
                <div class="main-container-header-line fix">
                    <div class="row">
                        <div class="col-xs-6 col-md-6"> <h4 class="g4"> <a class="a-back" href="javascript:history.go(-1)"><em class="el-icon-arrow-left"></em>
                            <em th:text="项目成员"></em>
                        </a></h4></div>
                        <div class="col-xs-6 col-md-6 tr f12">
                            <div class="bread-link-box">
                                当前位置：<a th:href="@{/console/project}">项目管理</a>
                                &nbsp;&gt;&nbsp;
                                <em th:text="项目成员"></em>
                            </div><!-- /bread-link-box -->
                        </div>
                    </div><!-- /row -->
                </div><!-- main-container-header-line -->
            </div>
        </div><!-- /main-container-header -->

        <div class="f14" id="app" v-cloak>
            <br>
            <el-card shadow="hover" class="rel">
                <p> 项目名称：<span class="red b">{{ project.name }}</span> </p>
                <p> 项目类型：{{ project.type | changeProjectType }} <el-divider direction="vertical"></el-divider> 当前状态：{{ project.status | changeProjectStatus }} </p>
                <p style="margin-bottom:0;"> 创建日期：{{ project.createdate }} <el-divider direction="vertical"></el-divider> 概要说明：{{ project.rcontext }} </p>
                <img class="abs" th:src="@{/images/sa5.jpg}" height="100" style="right:0; top:8px;">
            </el-card><!-- /row -->
            <br>

            <el-card shadow="hover">
                <el-button type="danger"
                       @click ="memberHandleDelete">
                    删 除
                </el-button>
                <!--
                <button class="btn btn-info" @click ="promembertoggleSelection()">取消选择</button>
                -->
                <div class="mt10">
                    <el-table
                            ref="prouserTable"
                            :data="prouserData"
                            :highlight-current-row="true"
                            style="width: 100%"
                            @selection-change="handleMemDelSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="成员信息">
                            <template scope="scope">
                                <p class="b f14"> <i class="el-icon-user-solid"></i> {{ scope.row.name }} </p>
                                <p class="f12">
                                    所属会员：{{ scope.row.orgname }} <el-divider direction="vertical"></el-divider>
                                    <el-tag :type="scope.row.membertype == 'R' ? 'success' : 'info'" size="mini">
                                        {{ scope.row.membertype | memberType }}
                                    </el-tag>
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="createdate"
                                label="参与时间"
                                width="300">
                            <template scope="scope">
                                <p class="f12"> 加入日期：{{ scope.row.createdate }} </p>
                                <p class="f12"> 退出日期：{{ scope.row.invaliddate || '-' }} </p>
                            </template>
                        </el-table-column>
                        <el-table-column width="110"
                                label="操作">
                            <template scope="scope">
                                <el-button type="default"
                                       size="mini"
                                       v-if="scope.row.membertype == 'O'"
                                       @click="setManager(scope.row, 'R')">
                                    设为负责人
                                </el-button>
                                <el-button type="default"
                                           size="mini"
                                           v-if="scope.row.membertype == 'R'"
                                           @click="setManager(scope.row, 'O')">
                                    设为研究员
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="block mt10 tr">
                    <el-pagination
                            mini
                            layout="sizes, prev, pager, next"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="prouserPageSize"
                            :total="prouserDataFromDB.length"
                            @current-change="handleProUserPageChange"
                            @size-change="handleProUserPageSizeChange">
                    </el-pagination>
                </div>
            </el-card><!-- /row -->
        </div><!-- /app -->
    </div>
</div>
<div th:replace="lib :: javascript_box"></div>
<script> var id = '[[${id}]]'; </script>
<script th:src="@{/lib/console/project_user.js}"></script>
</body>
</html>

